<script setup lang="ts">
//自义定导航栏
import CategoryPanel from './components/CategoryPanel.vue';
import HotPanel from './components/HotPanel.vue';
import { getHomeBannerAPI, getHomeCategoryAPI,getHomeHotAPI } from '@/services/home';
import type { BannerItem,CategoryItem,HotItem } from '@/types/home';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue';
import type { XtxGuessInstance } from '@/types/components'
import PageSkeleton from './components/PageSkeleton.vue';
//获取并存储轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async() =>{
 const res = await getHomeBannerAPI()
//  console.log(res)
 bannerList.value = res.result
}
//获取分类组件数据
const categoryList = ref<CategoryItem[]>([])
const getHomeCategoryData = async()=>{
const res = await getHomeCategoryAPI()
console.log("CagetoryData",res)
categoryList.value = res.result
}
// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const getHomeHotData = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}
//是否加载中的标记
const isLoading = ref(false)
//`onload`更适合监听页面所有资源加载完成的状态 表示页面加载的时候
onLoad(async()=>{
  isLoading.value = true
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
  ])
  isLoading.value = false
})
//获取猜你喜欢组件实例
const guessRef = ref<XtxGuessInstance>()
//滚动触底方法
const onScrolltolower = ()=>{
  guessRef.value?.getMore()
}
const isTriggered = ref(false)
//自定义下拉刷新被触发
const onRefresherrefresh = async()=>{
  //动画触发
  isTriggered.value = true
  //加载数据 通过Promise.all一起发送，全部执行后再结束 性能优化
  // getHomeBannerData()
  // getHomeCategoryData()
  // getHomeHotData()
  guessRef.value?.resetData()
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHotData(),
    guessRef.value?.getMore(),
  ])
  //动画结束
  isTriggered.value = false
}

</script>

<template>
  <!--自义定导航栏-->
  <CustomNavbar/>
<scroll-view refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered"
@scrolltolower="onScrolltolower" scroll-y class ="scroll-view">
  <PageSkeleton v-if = "isLoading"/>
  <template v-else>
      <!--轮播图组件-->
      <XtxSwiper :list = "bannerList"/>
      <!--分类组件-->
      <CategoryPanel :list = "categoryList"/>
      <!--热门推荐-->
      <HotPanel :list = "hotList"/>
      <!--猜你喜欢-->
      <XtxGuess ref = "guessRef"/>
  </template>

</scroll-view>
</template>

<style lang="scss">
//page 类似浏览器的body 小程序APP独有根标签
page{
  background-color:#f7f7f7;
  height:100%;
  display: flex;
  flex-direction: column;
}
.scroll-view{
  display: 1;
}
</style>
